<template>
  <div class="wrapper" v-if="types">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <h3>项目申报</h3>
      <!-- 导航 -->
      <div class="box">
        <div
          :class="sub == 0 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 0 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >1 填写基本信息</div>
        <div
          :class="sub == 1 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 1 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >2 填写详细信息</div>
      </div>
      <form action method enctype="multipart/form-data" onsubmit="return false">
        <div v-show="sub == 0">
          <h4>一、基本信息</h4>
          <!-- start -->
          <aside>
            <div>
              <label>项目名称:</label>
              <input type="text" name="name" value v-model="bgData.name" required />
            </div>
            <div>
              <label>项目申报单位:</label>
              <input type="text" name="company" v-model="company" value disabled required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目类别:</label>
              <select name="tid" v-model="tid">
                <template v-for="(type, index) in types">
                  <option :key="index" :value="index">{{ type }}</option>
                </template>
              </select>
            </div>
            <div>
              <label>项目落地区域:</label>
              <select name="rid" v-model="rid">
                <template v-for="(list, index) in area">
                  <option :key="index" :value="index">{{ list }}</option>
                </template>
              </select>
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>一级项目方向:</label>
              <select name="first_level" v-model="first_level">
                <template v-for="(list, index) in first_levels">
                  <option :key="index" :value="index">{{ list }}</option>
                </template>
              </select>
              <!-- <input type="text" name="first_level" v-model="first_level" value required /> -->
            </div>
            <div>
              <label>二级项目方向:</label>
              <input type="text" name="secondary" v-model="bgData.secondary" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目服务领域:</label>
              <input type="text" name="fieldeara" v-model="bgData.fieldeara" value required />
            </div>
            <div>
              <label>申报单位属性:</label>
              <input type="text" name="attribute" v-model="bgData.attribute" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>申请日期:</label>
              <input type="date" name="aterm" v-model="bgData.aterm" value required />
            </div>
            <div>
              <label>截止日期:</label>
              <input type="date" name="fterm" v-model="bgData.fterm" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>通讯地址:</label>
              <input type="text" name="postaladdress" v-model="bgData.postaladdress" value required />
            </div>
            <div>
              <label>邮政编码:</label>
              <input type="text" name="postalcode" v-model="bgData.postalcode" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>电子邮箱:</label>
              <input type="text" name="pmail" v-model="bgData.pmail" value required />
            </div>
            <div>
              <label>传真电话:</label>
              <input type="text" placeholder="非必填" name="fax_tel" v-model="bgData.fax_tel" value />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>法定代表人:</label>
              <input type="text" name="plegal" v-model="bgData.plegal" value required />
            </div>
            <div>
              <label>统一社会信用代码:</label>
              <input type="text" name="plcode" v-model="bgData.plcode" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <section>
            <div>
              <label>负责人姓名:</label>
              <input class="i" type="text" name="pname" v-model="bgData.pname" value required />
            </div>
            <div>
              <label>职务:</label>
              <input class="i" type="text" name="poster" v-model="bgData.poster" value required />
            </div>
            <div>
              <label>办公电话:</label>
              <input
                class="i"
                type="text"
                name="poffice_tel"
                v-model="bgData.poffice_tel"
                value
                required
              />
            </div>
            <div>
              <label>手机:</label>
              <input class="i" type="text" name="aphone" v-model="bgData.aphone" value required />
            </div>
          </section>
          <!-- end -->
          <section>
            <div>
              <label>联系人姓名:</label>
              <input class="i" type="text" name="cname" v-model="bgData.cname" value required />
            </div>
            <div>
              <label>职务:</label>
              <input class="i" type="text" name="cpost" v-model="bgData.cpost" value required />
            </div>
            <div>
              <label>办公电话:</label>
              <input
                class="i"
                type="text"
                name="coffice_tel"
                v-model="bgData.coffice_tel"
                value
                required
              />
            </div>
            <div>
              <label>手机:</label>
              <input class="i" type="text" name="cphone" v-model="bgData.cphone" value required />
            </div>
          </section>
          <!-- end -->
          <div class="btn" @click="btn(1)">下一页</div>
        </div>
        <div v-show="sub == 1">
          <div class="cc">
            <!-- start -->
            <aside>
              <div>
                <label>项目主责单位:</label>
                <input class="i-i" type="text" name="prespo" v-model="bgData.prespo" value required />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <!-- 第二页的 -->
              <div>
                <label>通讯地址:</label>
                <input type="text" name="respoadd" v-model="bgData.respoadd" value required />
              </div>
              <div>
                <label>邮政编码:</label>
                <input type="text" name="respopcode" v-model="bgData.respopcode" value required />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>电子邮箱:</label>
                <input type="text" name="respomail" v-model="bgData.respomail" value required />
              </div>
              <div>
                <label>传真电话:</label>
                <input type="text" placeholder="非必填" name="respophone" v-model="bgData.respophone" value />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <section>
              <div>
                <label>负责人姓名:</label>
                <input class="i" type="text" name="respopname" v-model="bgData.respopname" value required />
              </div>
              <div>
                <label>职务:</label>
                <input class="i" type="text" name="respopost" v-model="bgData.respopost" value required />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respoophone"
                  v-model="bgData.respoophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input
                  class="i"
                  type="text"
                  placeholder="非必填"
                  name="respoptel"
                  v-model="bgData.respoptel"
                  value
                />
              </div>
            </section>
            <!-- end -->
            <section>
              <div>
                <label>联系人姓名:</label>
                <input class="i" type="text" name="respocname" v-model="bgData.respocname" value required />
              </div>
              <div>
                <label>职务:</label>
                <input class="i" type="text" name="respocpost" v-model="bgData.respocpost" value required />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respocophone"
                  v-model="bgData.respocophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input
                  class="i"
                  type="text"
                  placeholder="非必填"
                  name="respoctel"
                  v-model="bgData.respoctel"
                  value
                />
              </div>
            </section>
            <!-- end -->
          </div>
          <div>
            <div class="xx">
              <h5>二、申报单位简介</h5>
              <div class="rich">
                <about-us @aboutUs="aboutUs" :aboutUsVal="aboutUsVal"></about-us>
              </div>
              <!-- <textarea
                value
                name="decldes"
                v-model="decldes"
                required
              ></textarea>-->
            </div>
            <div class="xx">
              <h5>三、项目简介</h5>
              <div class="rich">
                <project-brief @projectBrief="projectBrief" :projectBriefVal="projectBriefVal"></project-brief>
              </div>
              <!-- <textarea
                value
                name="prodes"
                v-model="prodes"
                required
              ></textarea>-->
            </div>
            <div class="xx">
              <h5>四、项目论证</h5>
              <h3>(一) 项目实施的必要性、可行性</h3>
              <div class="rich">
                <project-assessment
                  @projectAssessment="projectAssessment"
                  :projectAssessmentVal="projectAssessmentVal"
                ></project-assessment>
              </div>
              <!-- <textarea
                value
                name="prodemo"
                v-model="prodemo"
                required
              ></textarea>-->
              <h3>
                (二)
                项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
              </h3>
              <p>1.项目实施的已有基础</p>
              <article>〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕</article>
              <div class="rich">
                <existing-basis @existingBasis="existingBasis" :existingBasisVal="existingBasisVal"></existing-basis>
              </div>
              <!-- <textarea
                value
                name="prodemojc"
                v-model="prodemojc"
                required
                placeholder="(说明:包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等)"
              ></textarea>-->
              <p>2.具体方法和途径</p>
              <article>〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕</article>
              <div class="rich">
                <methods-way @methodsWay="methodsWay" :methodsWayVal="methodsWayVal"></methods-way>
              </div>
              <!-- <textarea
                name="prodemotj"
                value
                v-model="prodemotj"
                required
                placeholder="(说明:包括项目实施的具体方式、途径。明确项目的具体组成内容(子项目、各类服务等),每类、每次活动的具体内容、形式、对象、次数、人数等)"
              ></textarea>-->
              <p>3.进度安排</p>
              <article>〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕</article>
              <div class="rich">
                <scheduling @scheduling="scheduling" :schedulingVal="schedulingVal"></scheduling>
              </div>
              <!-- <textarea
                name="prodemojd"
                value
                v-model="prodemojd"
                required
                placeholder="(说明:可单独作为一部分,也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月,不建议简单表述为“年内”、“上半年”“下半年”、“第*季度”等。)"
              ></textarea>-->
              <p>4.预期效果</p>
              <article>〔说明：具体明确项目实施所要达到的目标或预期的效果。〕</article>
              <div class="rich">
                <desired-effect @desiredEffect="desiredEffect" :desiredEffectVal="desiredEffectVal"></desired-effect>
              </div>
              <!-- <textarea
                value
                name="prodemoxg"
                v-model="prodemoxg"
                placeholder="(说明:具体明确项目实施所要达到的目标或预期的效果以及)"
              ></textarea>-->
              <p>5.项目团队及分工</p>
              <article>〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕</article>
              <div class="rich">
                <division-labor @divisionLabor="divisionLabor" :divisionLaborVal="divisionLaborVal"></division-labor>
              </div>
              <!-- <textarea
                value
                required
                v-model="prodemofg"
                name="prodemofg"
                placeholder="(说明:包括项目实施的组织管理机构组成,各子项目或各项服务活动的具体承接单位和负责人,各有关协作单位等。如有以主责单位名义申报的综合性、联合性项目,要细化各子项目的组织实施体系。如有涉及到委托管理(如财务委托管理)的,要在组织架构中予以说明。要把可能引起转包怀疑的所有事项交代清楚,避免在检查、审计和评估中产生误解。)"
              ></textarea>-->
              <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
              <div class="rich">
                <cover @cover="cover" :coverVal="coverVal"></cover>
              </div>
              <!-- <textarea
                required
                name="prodemotwo"
                v-model="prodemotwo"
                value
              ></textarea>-->
            </div>
            <div class="xx">
              <h5>五、经费预算</h5>
              <!-- <textarea name="funds" v-model="funds" required value></textarea> -->
              <div class="rich">
                <rich-text-one @quillVal="quillVal" :initialTextVal="initialTextVal"></rich-text-one>
              </div>
            </div>
            <div class="xxx">
              <h5>六、申报单位承诺</h5>
              <div class="plpl" style="margin-top:32px;">
                <span
                  @click="thf()"
                  :class="thff ? 'ic' : ''"
                  class="iconfont icon-fuxuankuang_xuanzhong"
                ></span>
                <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
              </div>
            </div>
            <div class="xxx">
              <h5>七、项目主责单位意见</h5>
              <div class="xxxx">
                <template>
                  <el-upload
                    class="upload-demo"
                    action="http://cyteam.org.cn/api/v1/file/files"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="successUpload"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="10"
                    :on-exceed="handleExceed"
                    :file-list="fileLists"
                  >
                    <el-button size="small" type="primary">上传文件</el-button>
                    <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span>
                  </el-upload>
                </template>
              </div>
            </div>
          </div>
          <div class="ll">
            <button type="button" @click="btn(0)">上一页</button>
            <button type="button" @click="submit(0)">保存</button>
            <button type="submit" @click="submit(1)">提交</button>
          </div>
        </div>
      </form>
      <div class="queren" v-if="popupStatus">
        <div>
          <p>{{ subStatus == 0 ? "是否保存申报项目" : "是否确认申报项目" }}</p>
          <div>
            <span @click="popupStatus = !popupStatus">否</span>
            <span @click="submitYes">是</span>
          </div>
          <span v-if="subStatus == 1">请您核对以上项目申报信息，提交之后不可修改</span>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
const path = require("path");
const files = require.context("@/components", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
var preD = function(e) {
  e.preventDefault();
};
export default {
  components: modules,
  props: {},
  data() {
    return {
      index_num: 2,
      sub: 0,
      bgData: {},
      initialTextVal: "",
      initialText: "",
      aboutUsText: "",
      aboutUsVal: "",
      projectBriefVal: "",
      projectBriefText: "",
      projectAssessmentVal: "",
      projectAssessmentText: "",
      existingBasisVal: "",
      existingBasisText: "",
      methodsWayVal: "",
      methodsWayText: "",
      schedulingVal: "",
      schedulingText: "",
      desiredEffectVal: "",
      desiredEffectText: "",
      divisionLaborVal: "",
      divisionLaborText: "",
      coverVal: "",
      coverText: "",
      thff: false,
      imgUrl: {
        bg0: require("../../../static/img/bg0.png"),
        bg1: require("../../../static/img/bg1.png"),
        xa: require("../../../static/img/xa.png")
      },
      fileLists: [],
      popupStatus: false,
      first_levels: [],
      types: [],
      area: [],
      name: "",
      company: "",
      tid: "",
      rid: "",
      first_level: "",
      secondary: "",
      fieldeara: "",
      attribute: "",
      aterm: "",
      fterm: "",
      postaladdress: "",
      postalcode: "",
      pmail: "",
      fax_tel: "",
      plegal: "",
      plcode: "",
      pname: "",
      poster: "",
      poffice_tel: "",
      aphone: "",
      cname: "",
      cpost: "",
      coffice_tel: "",
      cphone: "",
      prespo: "",
      respoadd: "",
      respopcode: "",
      respomail: "",
      respophone: "",
      respoctel: "",
      respopname: "",
      respopost: "",
      respoophone: "",
      respoptel: "",
      respocname: "",
      respocpost: "",
      respocophone: "",
      decldes: "",
      prodes: "",
      prodemo: "",
      prodemojc: "",
      prodemotj: "",
      prodemojd: "",
      prodemoxg: "",
      prodemofg: "",
      prodemotwo: "",
      funds: "",
      proimages: "",
      subStatus: 0,
      picture: [],
      pid: 0,
      imgs: []
      // imgData: {
      //   accept: "image/gif, image/jpeg, image/png, image/jpg"
      // }
    };
  },
  computed: {},
  watch: {
    popupStatus(val) {
      if (val) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, {
          passive: false
        }); /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = ""; /** 出现滚动条 */
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  },
  methods: {
    successUpload(response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      });
    },
    handleRemove(file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1);
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    /** 获取富文本内容 */
    aboutUs(data) {
      this.aboutUsText = data;
    },
    projectBrief(data) {
      this.projectBriefText = data;
    },
    projectAssessment(data) {
      this.projectAssessmentText = data;
    },
    existingBasis(data) {
      this.existingBasisText = data;
    },
    methodsWay(data) {
      this.methodsWayText = data;
    },
    scheduling(data) {
      this.schedulingText = data;
    },
    desiredEffect(data) {
      this.desiredEffectText = data;
    },
    divisionLabor(data) {
      this.divisionLaborText = data;
    },
    cover(data) {
      this.coverText = data;
    },
    quillVal(data) {
      this.initialText = data;
    },
    /** 申报单位承诺 */
    thf() {
      this.thff = !this.thff;
    },
    /** 下一步 */
    btn(index) {
      let s = this.sub;
      s = index;
      // this.sub = s
 this.assignment(this.bgData);
      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      // console.log( this.bgData)
      // console.log(this.name)
      // console.log(this.company)
      // console.log(this.tid)
      // console.log(this.rid)
      // console.log(this.first_level)
      if (
        this.name === "" ||
        this.company === "" ||
        this.tid === "" ||
        this.rid === "" ||
        this.first_level === "" ||
        this.secondary === "" ||
        this.fieldeara === "" ||
        this.attribute === "" ||
        this.aterm === "" ||
        this.fterm === "" ||
        this.postaladdress === "" ||
        this.postalcode === "" ||
        this.pmail === "" ||
        this.plegal === "" ||
        this.plcode === "" ||
        this.pname === "" ||
        this.poster === "" ||
        this.poffice_tel === "" ||
        this.aphone === "" ||
        this.cname === "" ||
        this.cpost === "" ||
        this.coffice_tel === "" ||
        this.cphone === ""
      ) {
        alert("请认真核对填写内容完整性！");
        return false;
      } else if (this.aterm > this.fterm) {
        alert("截止日期应比申请日期晚");
        return false;
      } else if (
        !regd.test(this.bgData.poffice_tel) ||
        !regd.test(this.bgData.coffice_tel)
      ) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (
        !regs.test(this.bgData.aphone) ||
        !regs.test(this.bgData.cphone)
      ) {
        alert("请填写正确的手机号码！");
        return false;
      } else {
        this.sub = s;
      }
    },
    /** 保存和提交 */
    submit(index) {
      let s = this.subStatus;
      s = index;
      this.subStatus = s;

      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

      this.decldes = this.aboutUsText;
      this.prodes = this.projectBriefText;
      this.prodemo = this.projectAssessmentText;
      this.prodemojc = this.existingBasisText;
      this.prodemotj = this.methodsWayText;
      this.prodemojd = this.schedulingText;
      this.prodemoxg = this.desiredEffectText;
      this.prodemofg = this.divisionLaborText;
      this.prodemotwo = this.coverText;
      this.funds = this.initialText;
      // this.proimages = [...this.fileLists, ...this.picture]
      this.proimages = [...this.picture];

      // if (this.subStatus === 1) {
     
    
      if (
        this.name === "" ||
        this.company === "" ||
        this.tid === "" ||
        this.rid === "" ||
        this.first_level === "" ||
        this.secondary === "" ||
        this.fieldeara === "" ||
        this.attribute === "" ||
        this.aterm === "" ||
        this.fterm === "" ||
   this.postaladdress === "" ||
        this.postalcode === "" ||
        this.pmail === "" ||
        this.plegal === "" ||
        this.plcode === "" ||
        this.pname === "" ||
         this.poster === "" ||
        this.poffice_tel === "" ||
            this.aphone === "" ||
        this.cname === "" ||
        this.cpost === "" ||
        this.coffice_tel === "" ||
        this.cphone === ""||
        this.prespo === "" ||
        this.respoadd === "" ||
        this.respopcode === "" ||
        this.respomail === "" ||
        this.respopname === "" ||
        this.respopost === "" ||
        this.respoophone === "" ||
        this.respocname === "" ||
        this.respocpost === "" ||
        this.respocophone === "" ||
        this.decldes === "" ||
        this.prodes === "" ||
        this.prodemo === "" ||
        this.prodemojc === "" ||
        this.prodemotj === "" ||
        this.prodemojd === "" ||
        this.prodemoxg === "" ||
        this.prodemofg === "" ||
        this.prodemotwo === "" ||
        this.funds === ""
      ) {
        alert("请认真核对填写内容完整性！");
        return false;
      } else if (this.aterm > this.fterm) {
        alert("截止日期应比申请日期晚");
        return false;
      } else if (!regd.test(this.poffice_tel) || !regd.test(this.coffice_tel)) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
        alert("请填写正确的手机号码！");
        return false;
      } else if (
        !regd.test(this.respoophone) ||
        !regd.test(this.respocophone)
      ) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (this.thff === false) {
        alert("请同意：申报单位承诺");
        return false;
      } else if (this.proimages.length === 0) {
        alert("未上传文件！");
        return false;
      }

      if (this.respoptel !== "" && !regs.test(this.respoptel)) {
        alert("请填写正确的手机号码！");
        return false;
      }
      if (this.respoctel !== "" && !regs.test(this.respoctel)) {
        alert("请填写正确的手机号码！");
        return false;
      }
      // }

      let val = this.proimages;
      val = JSON.stringify(this.proimages);
      this.proimages = val;

      // if (this.subStatus === 1) {
      if (this.proimages === "") {
        alert("文件还未上传！");
        return false;
      }
      // }

      this.popupStatus = true;
    },
    /** 申报项目 */
    submitYes() {
      this.popupStatus = false;
      let _this = this;
      this.$http({
        method: "post",
        url: "v1/project/apply",
        data: {
          id: _this.pid,
          subStatus: _this.subStatus,
          name: _this.name,
          company: _this.company,
          tid: _this.tid,
          rid: _this.rid,
          first_level: _this.first_level,
          secondary: _this.secondary,
          fieldeara: _this.fieldeara,
          attribute: _this.attribute,
          aterm: _this.aterm,
          fterm: _this.fterm,
          postaladdress: _this.postaladdress,
          postalcode: _this.postalcode,
          pmail: _this.pmail,
          fax_tel: _this.fax_tel,
          plegal: _this.plegal,
          plcode: _this.plcode,
          pname: _this.pname,
          poster: _this.poster,
          poffice_tel: _this.poffice_tel,
          aphone: _this.aphone,
          cname: _this.cname,
          cpost: _this.cpost,
          coffice_tel: _this.coffice_tel,
          cphone: _this.cphone,
          prespo: _this.prespo,
          respoadd: _this.respoadd,
          respopcode: _this.respopcode,
          respomail: _this.respomail,
          respophone: _this.respophone,
          respoctel: _this.respoctel,
          respopname: _this.respopname,
          respopost: _this.respopost,
          respoophone: _this.respoophone,
          respoptel: _this.respoptel,
          respocname: _this.respocname,
          respocpost: _this.respocpost,
          respocophone: _this.respocophone,
          decldes: _this.decldes,
          prodes: _this.prodes,
          prodemo: _this.prodemo,
          prodemojc: _this.prodemojc,
          prodemotj: _this.prodemotj,
          prodemojd: _this.prodemojd,
          prodemoxg: _this.prodemoxg,
          prodemofg: _this.prodemofg,
          prodemotwo: _this.prodemotwo,
          funds: _this.funds,
          proimages: _this.proimages
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.code === 200) {
              alert(res.data.data.msg);
              _this.proimages = "";
              _this.$router.push({
                name: "project"
              });
            } else {
              alert(res.data.data.msg);
            }
          } else {
            alert(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 获取下拉框的数据 */
    getData() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/get-info",
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.types = res.data.data.type;
            _this.area = res.data.data.area;
            _this.first_levels = res.data.data.first_level;
            if (this.$route.query.id) {
              let id = this.$route.query.id;
              this.getDataDetails(id);
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 判断是否有权限进行项目申报 */
    status() {
      let id = sessionStorage.id;
      let _this = this;
      this.$http({
        method: "post",
        url: "v1/society/get-status",
        data: { id: id }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.status === 0) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 3) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 4) {
              alert("项目申报暂未开始！");
              _this.$router.push({
                name: "project"
              });
            } else {
              _this.getData();
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 为提交时的赋值操作 */
    assignment(data) {
      this.name = data.name;
      // this.company = data.company
      for (var prop in this.types) {
        if (data.tid === this.types[prop]) {
          this.tid = prop;
        }
      }
      for (var prop in this.area) {
        if (data.rid === this.area[prop]) {
          this.rid = prop;
        }
      }
      // this.bgData.area.forEach((item, index) => {
      //   if (data.rid === item) {
      //     this.rid = parseInt(index)
      //   }
      // })
      for (let prop in this.first_levels) {
        if (data.first_level === this.first_levels[prop]) {
          this.first_level = prop;
        }
      }
      this.secondary = data.secondary;
      this.fieldeara = data.fieldeara;
      this.attribute = data.attribute;
      this.aterm = data.aterm;
      this.fterm = data.fterm;
      this.postaladdress = data.postaladdress;
      this.postalcode = data.postalcode;
      this.pmail = data.pmail;
      this.fax_tel = data.fax_tel;
      this.plegal = data.plegal;
      this.plcode = data.plcode;
      this.pname = data.pname;
      this.poster = data.poster;
      this.poffice_tel = data.poffice_tel;
      this.aphone = data.aphone;
      this.cname = data.cname;
      this.cpost = data.cpost;
      this.coffice_tel = data.coffice_tel;
      this.cphone = data.cphone;
      this.prespo = data.prespo;
      this.respoadd = data.respoadd;
      this.respopcode = data.respopcode;
      this.respomail = data.respomail;
      this.respophone = data.respophone;
      this.respopname = data.respopname;
      this.respopost = data.respopost;
      this.respoophone = data.respoophone;
      this.respoptel = data.respoptel;
      this.respocname = data.respocname;
      this.respocpost = data.respocpost;
      this.respocophone = data.respocophone;
      this.respoctel = data.respoctel;
      this.aboutUsVal = data.decldes;
      this.aboutUsText = data.decldes;
      this.projectBriefVal = data.prodes;
      this.projectBriefText = data.prodes;
      this.projectAssessmentVal = data.prodemo;
      this.projectAssessmentText = data.prodemo;
      this.existingBasisVal = data.prodemojc;
      this.existingBasisText = data.prodemojc;
      this.methodsWayVal = data.prodemotj;
      this.methodsWayText = data.prodemotj;
      this.schedulingVal = data.prodemojd;
      this.schedulingText = data.prodemojd;
      this.desiredEffectVal = data.prodemoxg;
      this.desiredEffectText = data.prodemoxg;
      this.divisionLaborVal = data.prodemofg;
      this.divisionLaborText = data.prodemofg;
      this.coverVal = data.prodemotwo;
      this.coverText = data.prodemotwo;
      this.initialTextVal = data.funds;
      this.initialText = data.funds;

      this.pid = data.id;


      if(data.proimages){
         let imgs = JSON.parse(data.proimages);
      this.fileLists = imgs;
      }
     
      this.picture = this.fileLists;
    },
    getDataDetails(id) {
      this.$http({
        method: "post",
        url: "v1/project/details",
        data: {
          id: id
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            this.bgData = res.data.data.data.ProjectDetails;
            this.assignment(this.bgData);
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.company = sessionStorage.name;
  },
  mounted() {
    this.status();
  }
};
</script>

<style lang="scss" scoped>
.rich {
  z-index: 10;
  width: 100%;
  margin: 30px auto 0px;
  height: 320px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .queren {
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: rgba($color: #000, $alpha: 0.56);
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      width: 500px;
      height: 400px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px 0 100px;
      box-sizing: border-box;

      & > span {
        text-align: center;
        width: 120%;
        color: #000;
      }

      & > p {
        font-size: 32px;
        font-weight: 600;
      }

      & > div {
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
  }

  #box {
    margin: 40px auto 0;
    padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1200px;
    background-color: #ffffff;

    form {
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        // height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }

          /deep/ .upload-demo {
            margin-bottom: 10%;
          }

          /deep/ .el-button--primary {
            margin-top: 32px;
            border: none;
            cursor: pointer;
            width: 96px;
            height: 32px;
            border-radius: 4px;
            background-image: linear-gradient(
                69deg,
                #cc263f 0%,
                #f42b47 100%,
                #ed162d 100%,
                #e60012 100%
              ),
              linear-gradient(#e60012, #e60012);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          /deep/ .el-upload-list.el-upload-list--text {
            max-height: 100px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none !important;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        article {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              // width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
              white-space: nowrap;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 130px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      section {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 100px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      width: 89px;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
